<template>
	<view>
		<view class="wrap_box">
			<!-- <u--image :src="src" width="20px" height="20px" class="top_image"></u--image> -->
			 <view class="title">你好</view>
			  <view class="title2">欢迎使用！</view>
			 <view class="main_input">
				 <view class="item-back input_bag" style="position: relative;">
				 	<image src="@/static/image/login/phone1.png"  class="phone"></image>
				 	<input type="tel" v-model="loginForm.username" placeholder="请输入手机号码" placeholder-class="holder-info"
				 		maxlength="11" />
				 	<input type="tel" style="position: absolute; z-index: -1;" />
				 </view>
				 <view  class="item-back input_bag">
				 	<image src="@/static/image/login/yanzhengma.png" class="phone"></image>
					<input type="number" v-model="loginForm.code" placeholder="请输入验证码" placeholder-class="holder-info"
				 		maxlength="6" /> 
				 	<view class="send-back" @click="sendBtnClick">
				 		{{sendMessage}}
				 	</view>
				 </view>
			 </view>
			<view class="btn-back">
				<view class="login_btn2"  @click="loginBtnClick" > 立即登录</view>
			</view>
			 <view >
				 <view class="agreement ">
				 
					<view @click="toggleAgree" class="agreement">
					      <image v-if="isAgreed" src="/static/image/login/redio_ye.png"></image>
					      <image v-else src="/static/image/login/radio_no.png"></image>
					    </view>
					
					<view style="margin-top: 18rpx;">
						<text>我已阅读并同意</text>
						<text @click="toAgreementPage('agreement')" class="textred">《用户协议》</text>与<text
									 		@click="toAgreementPage('privacy_policy')" class="textred">《隐私协议》</text>
					</view>
					
				 </view>
		
			 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:require("@/static/back_hei.png"),
				isAgreed: true,
				count: 180,
				loginForm: {
					password: "",
					code: "",
					username: ""
				},
				sendMessage:"获取验证码"
			}
		},
		methods: {
			toggleAgree(){
				if(this.isAgreed){
					this.isAgreed=false
				}else{
					this.isAgreed=true
				}
			},
			sendBtnClick() {
				if (this.canSend) {
					if (!this.$u.test.mobile(this.loginForm.username)) {
						this.$alert('请输入合理有效的手机号')
						return
					}
					this.$showLoading()
					// this.$u.api.api2_sendSmscode({
					// 	messageChannel: 'XX',
					// 	phoneNo: this.loginForm.username,
					// 	systemType: "AGENT",
					// 	type: "LOGIN",
					// }).then(res => {
					// 	this.$alert("短信验证码已发送")
					// 	this.timeBegin()
					// })
					this.$alert("短信验证码已发送")
					this.timeBegin()
				}
			},
			timeBegin() {
				this.sendMessage = this.count + "s后重发"
				this.canSend = false
				this.timer = setInterval(() => {
					this.count--
					this.sendMessage = this.count + "s后重发"
					if (this.count <= 0) {
						this.sendMessage = "发送验证码"
						this.canSend = true
						this.count = 180
						clearInterval(this.timer)
					}
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap_box{
		width: 100%;
		// padding: 30rpx;
		min-height: 100vh;
		// #ifdef H5
		// min-height: calc(100vh - 44px);
		// #endif
		background: #FFFFFF;
		padding: 0 24rpx 100rpx;
	}
	.top_image{
		margin-top: 20px;
	}
	.title{
		margin-top: 50px;
		font-size: 19px;
		margin-left: 20px;
	}
	.input_bag{
		background-color: #F5F5F5;
		border-radius: 30px;
	}
	.title2{
		margin-top: 20px;
		margin-left: 20px;
	}
	
	.main_input{
		margin-top: 50px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.input_tishi{
		margin-top: 10px;
		font-size: 12px;
		color: #999999;
	}
	.login_bottom{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 25rpx;
		margin-top: 20rpx;
		color: #999999;
	}
	.item-back {
		display: flex;
		align-items: center;
		margin-top: 32rpx;
		padding: 15rpx 30rpx;
		border-bottom: 1px solid #E8E8E8;
	
		.phone{
			width: 28rpx;
			height: 35rpx;
		}
	
		input {
			flex-grow: 1;
			margin-left: 20rpx;
			color: #333333;
			font-weight: 500;
			font-size: 30rpx;
		}
	
		.holder-info {
			font-size: 30rpx;
			color: #B5B5B5;
			font-weight: 400;
		}
	}
	.login_btn2 {
		width: 100%;
		height: 90rpx;
		background-color: #e34234;
		font-size: 32rpx;
		border-radius: 50rpx;
		opacity: 1;
		margin-top: 80rpx;
		border-color: #e34234 ;
		color: #ffffff;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.send-back {
		flex-shrink: 0;
		color: #666666;
		font-size: 30rpx;
		height: 46rpx;
		// width: 90rpx;
		line-height: 46rpx;
		text-align: right;
		border-left: 1rpx solid #E8E8E8;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.agreement {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-weight: 400;
		color: #333333;
		margin-top: 5px;
		font-size: 24rpx;
		align-items: center;
		// padding: 80rpx 0;
		margin-top: 20rpx;
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 16rpx;
		}
	
		.textred {
			color: #e34234;
		}
		
		/* 基础样式重置 */
		.custom-checkbox {
		  -webkit-appearance: none;
		  -moz-appearance: none;
		  width: 40rpx;
		  height: 40rpx;
		  border: 2rpx solid #ccc;
		  border-radius: 50%;
		  position: relative;
		  transition: all 0.3s;
		}
		
		/* 选中状态 */
		.custom-checkbox.checked {
		  background: #e34234;
		  border-color: #e34234;
		}
		
		/* 自定义对勾 */
		.custom-checkbox.checked::after {
		  content: '';
		  width: 12rpx;
		  height: 20rpx;
		  border: 2rpx solid #fff;
		  border-top: none;
		  border-right: none;
		  position: absolute;
		  top: 6rpx;
		  left: 14rpx;
		  transform: rotate(-45deg);
		}
		
		.checkbox-item {
		  display: flex;
		  align-items: center;
		  gap: 10rpx;
		}
		
		.container {
		  padding: 30rpx;
		}
	}
	

</style>
